
<% if policy(@project).can_feature? %>
  <%= form_with(model: FeaturedCircuit.new, url: "/featured_circuits", multipart: true, id: "featuredCircuit") do |form| %>
    <%= form.hidden_field :project_id, value: @project.id %>
    <div class="mb-3 projects-primary-checkpoint">
      <label for="featured_checkbox" class="primary-checkpoint-container"><h6><%= t("projects.form.feature_circuit_checkpoint") %></h6>
        <%= form.check_box :featured, checked: @project.featured?, id: "featured_checkbox" %>
        <div class="rounded"></div>
      </label>
    </div>
  <% end %>
<% end %>

<%= form_with(model: [@project.author, @project], url: { action: "update" }, local: true, multipart: true, id: "projectForm") do |form| %>
  <% if project.errors.any? %>
    <div class="error-message">
      <ul class="mt-3 mb-3">
        <% project.errors.full_messages.each do |message| %>
        <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field mb-3 d-flex flex-column">
    <h6><%= form.label :name %></h6>
    <%= form.text_field :name, id: :project_name, class: "form-control form-input", maxlength: 90 %>
    <span id="name-counter" class="char-counter"></span>
  </div>
  <div class="field form-group projects-tag-mb-3">
    <h6><%= form.label :tag_list %></h6> <span><%= t("projects.form.tag_list_description") %></span>
    <%= form.text_field :tag_list, class: "form-control form-input" %>
  </div>
  <div class="field mb-3">
    <h6 class="mb-0"><%= form.label :project_access_type %></h6>
    <% if @project.featured? %>
      <div class="alert alert-warning d-flex align-items-center" role="alert">
+        <i class="fa fa-exclamation-triangle me-2"></i>
+        <div><%= t("projects.form.project_is_featured_message") %></div>
+      </div>
      <% end %>
    <%= form.select :project_access_type, [[t("projects.form.public"), "Public"], [t("projects.form.private"), "Private"], [t("projects.form.limited_access"), "Limited access"]], {}, class: "form-control form-input" %>
  </div>
  <div class="field mb-3" id="description">
    <h6><%= form.label :description %></h6>
    <%= render partial: "editor/index", locals: { content: @project.description } %>
  </div>
  <div class="field mb-3" onclick="beforeSubmit()">
    <%= form.submit class: "btn primary-button" %> &nbsp;
    <%= link_to t("back"), :back, class: "anchor-text" %>
  </div>

<% end %>

<script>
  function beforeSubmit() {
    generateFeaturedCircuit()
    generateEditor()
  }

  function generateEditor() {
    $('<input />').attr('type', 'hidden')
      .attr('name', 'description')
      .attr('value', $("#editor").cleanHtml())
      .appendTo('#projectForm');
  }

  function generateFeaturedCircuit() {
    const canFeature = $("#featuredCircuit") != undefined
    if(!canFeature) return;

    $("#featuredCircuit").submit(function(e) {
      e.preventDefault();
      var form = $(this);
      $.ajax({
              type: $("#featured_checkbox").is(":checked") ? "POST" : "DELETE",
              url: form.attr('action'),
              data: form.serialize()
      });
    });
    $("#featuredCircuit").submit();
  }

  document.addEventListener('DOMContentLoaded', function () {
    const nameField = document.getElementById('project_name');

    nameField.addEventListener('input', function () {
      const maxLength = parseInt(this.getAttribute('maxlength'));
      const currentLength = this.value.length;

      const nameCounter = document.getElementById('name-counter');
      nameCounter.textContent = `${currentLength} / ${maxLength}`;

      if (currentLength >= maxLength) {
        nameCounter.classList.add('text-danger');
      } else {
        nameCounter.classList.remove('text-danger');
      }
    });
  });
</script>
